<template>
    <div v-show="showTip" :style="{left: left, top: top}" class="tip">
        <div class="close">
            <el-tooltip class="item" effect="dark" content="关闭" placement="top">
                <i class="el-icon-circle-close close-button" @click="showTip = false"></i>
            </el-tooltip>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "tip",
        props: {
            x: {
                type: Number,
                default: 0
            },
            y: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                showTip: false
            }
        },
        computed: {
            left() {
                return this.x + 'px'
            },
            top() {
                return this.y + 'px'
            }
        },
        methods: {
            show() {
                this.showTip = true
            },
            close() {
                this.showTip = false
            }
        }
    }
</script>

<style scoped>
    .tip {
        min-width: 120px;
        min-height: 180px;
        position: absolute;
        z-index: 9999;
        background: rgba(69, 65, 65, 0.9);
        border-radius: 12px;
        box-shadow: 1px 1px 3px black;
        transition: .3s;
    }

    .close {
        margin: 5px;
    }

    .close-button {
        cursor: pointer;
        color: white;
        float: right
    }

    .content {
        clear: both;
        padding: 5px;
    }
</style>
